<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
			margin:0;
			padding:0;
		}
		.annular {
			position:relative;
			height:92px;
			width:92px;
		}
		svg {
			-webkit-transform:rotate(-0.05deg);
			transform:rotate(-0.05deg);
		}
		circle {
			-webkit-transition:stroke-dasharray .25s;
			transition:stroke-dasharray .25s;
		}
		.annular .red {
			position:absolute;
			z-index:10;
			width:100%;
			text-align:center;
			height:100%;
			line-height:92px;
			top:0;
			left:0;
		}

		</style>
	</head>
	<body>
		<div class="annular">
		    <svg width="92" height="92" viewBox="0 0 92 92">
			<circle cx="46" cy="46" r="40" stroke-width="6" stroke="#D1D3D7" fill="none"></circle>
			<circle class="roll" cx="46" cy="46" r="40" stroke-width="6" stroke="#FF5B19" fill="none" transform="matrix(0,-1,1,0,0,92)" stroke-dasharray="0 252"></circle>
		    </svg>
		    <p class="red">91.10%</p>
		</div>
		
		<div class="annular">
		    <svg width="92" height="92" viewBox="0 0 92 92">
			<circle cx="46" cy="46" r="40" stroke-width="6" stroke="#D1D3D7" fill="none"></circle>
			<circle class="roll" cx="46" cy="46" r="40" stroke-width="6" stroke="#FF5B19" fill="none" transform="matrix(0,-1,1,0,0,92)" stroke-dasharray="0 252"></circle>
		    </svg>
		    <p class="red">40.10%</p>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script>
			$(function(){
				$(".annular").each(function() {
				    var $_roll = $(this).find(".roll");
				    var perimeter = Math.PI * 2 * parseFloat($_roll.attr("r"));
				    var percent = parseFloat($(this).children(".red").text()) / 100;
				    $_roll.attr('stroke-dasharray', percent * perimeter + " " + perimeter);
				});
			})
		</script>
	</body>
</html>
